<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加权限</title>
	<#include "./comm/meta-base.ftl" />
	<#include "./comm/meta-easyui.ftl" />
	<#include "./comm/meta-comm.ftl" />
	<link href="${basePath}/static/css/privilege.css" rel="stylesheet" />
</head>
<body>
		
<form id="data_form" role="form" class="page-form"   method="post" >
	<div class="buts-row-top row ">
			<a href="javascript:submitForm();"  class="btn btn-success">
				<i class="fa fa-check"></i>提 交</a>
			<a href="javascript:MainTab.closeTabAndRefresh('员工管理')" class="btn btn-default">
				<i class="fa fa-times"></i>取 消</a>
	</div>
	<div class="but-row-top-shadow"></div>
	

	<div class="form-title">人员基础信息</div>
	
	<!-- 
	<div class="row">
		<div class="form-group col-sm-12 ">
           <label>
                <input id="radioAdd" name="addModel" value="ADD" type="radio" checked="checked" onclick=checkAddAppend(this) />
                <span class="text">新增员工</span>
            </label>
            <label>
                <input id="radioAppend" name="addModel" value="APPEND" type="radio" onclick=checkAddAppend(this)  />
                <span class="text">追加员工</span>
            </label>
         </div>
	</div>
	-->
	<input type="hidden" name="addModel" value="ADD" />
	
	
	<hr class="wide" />
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">所属公司： </label>
			<div class="col-sm-8 fm-control">
				<label class=" fm-label">${upmsCompanyPO.name} </label>
				
			</div>
		</div>
	
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">所属部门：</label>
			<div class="col-sm-8 fm-control">
				<label class=" fm-label">${upmsDepartmentPO.name}</label>
				<input type="hidden" name="departmentId" value="${upmsDepartmentPO.departmentId}" />
			</div>
		</div>
	</div>
	
	
<div id="appendDiv" class="hidden">
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">所属人员 </label>
			<div class="col-sm-8 fm-control">
				<select id="personSelect" name="personId" class="easyui-combogrid form-control "  data-options="
					panelWidth: 600,
					panelHeight: 400,
					idField: 'personId',
					textField: 'name',
					url: '${basePath}/person/person-list-json',
					pagination:true,
					toolbar:'#person_combox_toolbar',
					method: 'get',
					columns: [[
						{field:'name',title:'人员姓名',width:200},
						{field:'loginName',title:'登录名',width:200}
					]],
					fitColumns: true
				" >
				</select>
			</div>	
		</div>
		
		<div class="form-group col-sm-3">
			<label>
                <input name="isDefault" value="true" type="checkbox" checked="checked">
                <span class="text">默认员工</span>
            </label>
		</div>
	</div>
</div>

<div id="addDiv" class="">
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">姓名 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="name" class="form-control  easyui-validatebox" data-options="required:true,validType:['length[0,64]']" />
			</div>
		</div>
		
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">性别 </label>
			<div class="col-sm-8 fm-control">
				<select  name="gender" class=" easyui-validatebox easyui-combobox" >
					<#list genderList as gender>
						  <option value="${gender.lookupCode}">${gender.codeName}</option>
					</#list>
				</select>
			</div>
		</div>
		
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">生日 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="birthdayStr" class="easyui-datebox form-control easyui-validatebox "  data-options="" />
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">登录名 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="loginName" id="loginName" class="form-control easyui-validatebox" 
				data-options="required:true,validType:['length[0,64]','remote[\'${basePath}/person/person-loginName-validate\',\'loginName\']']" />
			</div>
		</div>
	
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">密码 </label>
			<div class="col-sm-8 fm-control">
				<input id="pwd" type="password" name="loginPassword" class="form-control easyui-validatebox" data-options="required:true,validType:['length[0,64]']" />
			</div>
		</div>
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">确认密码 </label>
			<div class="col-sm-8 fm-control">
				<input type="password"  name="cfmLoginPassword" class="form-control easyui-validatebox" data-options="required:true,validType:['equalTo[\'#pwd\']','length[0,64]']" />
			</div>
		</div>
	</div>
	
	<div class="form-title">联系方式</div>
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">邮箱 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="email" class="form-control easyui-validatebox"  data-options="validType:['email','length[0,64]']" />
			</div>
		</div>
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">QQ </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="qq" class="form-control easyui-validatebox" data-options="validType:['QQ','length[0,64]']" />
			</div>
		</div>
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">手机 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="mobile" class="form-control easyui-validatebox" data-options="validType:['mobile']" />
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">电话 </label>
			<div class="col-sm-8 fm-control">
				<input type="text" name="telephone" class="form-control easyui-validatebox" data-options="validType:['phoneRex']" />
			</div>
		</div>
		<div class="form-group col-sm-1">
			<label class="col-sm-2 fm-label" style="text-align:center">-</label>
			<div class="col-sm-10 fm-control">
				<input type="text" name="ext" class="form-control easyui-validatebox" data-options="validType:['number','length[0,8]']" />
			</div>
		</div>
	</div>
</div>

<div class="form-title">权限组</div>
<div class="row">
	<div class="form-group col-sm-6">
		<ul class="pgroup-ul">
			<#list upmsPrivilegeGroupPOList as upmsPrivilegeGroupPO>
				<li onclick="checkGroup(this)"   value="${upmsPrivilegeGroupPO.privilegeGroupId}">${upmsPrivilegeGroupPO.name}</li>
			</#list>
		</ul>
		<div id="grouphidden">
		</div>
	</div>
	<div class="form-group col-sm-6" style="height:400px;">
		<table id="tree_table" class="easyui-treegrid "  border="0"  rownumbers="true" fitColumns="true" fit="true"
	               data-options="
	               	   url:'${basePath}/privilege-group/checked-privilege-tree-json',
	                   method: 'get',
	                   rownumbers: true,
	                   idField: 'id',
	                   lines: true,
	                   checkOnSelect:false,
	                   treeField: 'text'
	               ">
	           <thead>
	           <tr>
	                <th data-options="field:'text',width:250">权限树</th>
	            </tr>
	           </thead>
	       </table>
	</div>
	


</div>
	
	
	
	
	
	<!--  
	<div class="row">
		<div class="form-group col-sm-3">
			<label class="col-sm-4 fm-label">权限组 </label>
			<div class="col-sm-8 fm-control">
				<select id="privilegeGroupSelect" class="easyui-combogrid form-control easyui-validatebox"  data-options="
					panelWidth: 600,
					panelHeight: 400,
					idField: 'privilegeGroupId',
					textField: 'name',
					url: '${basePath}/privilege-group/privilege-group-list-json',
					pagination:true,
					toolbar:'#privilegeGroup_combox_toolbar',
					method: 'get',
					columns: [[
						{field:'name',title:'权限组名',width:400}
					]],
					fitColumns: true
				">
				</select>
			</div>
		</div>
		<div class="form-group col-sm-3">
			<a class="btn btn-default  btn-sm" 
        	href="javascript:addGroup()"><i class="fa fa-plus"></i>添加权限组</a>
		</div>
	</div>
	<div class="row" >
		<div class="form-group col-sm-4">
		<table class="table table-bordered ">
			<thead>
				<tr>
					<th width="400">权限组名称</th>
					<th >操作</th>
				</tr>
			</thead>
			<tbody id="app-tbody">
				
			</tbody>
		</table>
		</div>
	</div>
	
	
	<div id="privilegeGroup_combox_toolbar" class="combox-toolbar">
		<div class="col-sm-8">
			<div class="form-group ">
				<input type="text" id="s_privilegeGroupName" name="privilegeGroupName" class="form-control"  placeholder="权限组名" />
			</div>
		</div>
		<div class="form-buttons float-right margin-top-5 margin-bottom-5" >
			<a href="javascript:searchPrivilegeGroup();" class="btn btn-labeled btn-blue float-right btn-sm">
				<i class="btn-label fa  fa-search btn-sm"></i>查 询
			</a>
		</div>
		<div class="clearfix" ></div>
	</div> 
	
	-->
	
	
</form>

<div id="person_combox_toolbar" class="combox-toolbar">
	<div class="col-sm-4">
		<div class="form-group ">
			<input type="text" id="s_personName" name="personName" class="form-control"  placeholder="人员姓名" />
		</div>
	</div>
	<div class="col-sm-4">
		<div class="form-group ">
			<input type="text" id="s_loginName" name="loginName" class="form-control"  placeholder="登录名" />
		</div>
	</div>
	<div class="form-buttons float-right margin-top-5 margin-bottom-5" >
		<a href="javascript:searchPerson();" class="btn btn-labeled btn-blue float-right btn-sm">
			<i class="btn-label fa  fa-search btn-sm"></i>查 询
		</a>
	</div>
	<div class="clearfix" ></div>
</div>  



 
 
 
</body>
</html>
<script type="text/javascript">
function checkGroup(obj){
	var $this=$(obj);
	if($this.hasClass("pchecked")){
		$this.removeClass("pchecked")
	}else{
		$this.addClass("pchecked")
	}
	
	var gphtml="";
	var groupIds="";
	var $lis=$(".pgroup-ul li.pchecked");
	for(var i=0;i<$lis.length;i++){
		var $li=$($lis[i]);
		var val=$li.attr("value");
		//console.log(val);
		groupIds+=val+",";
		
		gphtml+="<input type=\"hidden\" name=\"privilegeGroupIdArray\" value=\""+val+"\"  />";
	}
	$("#grouphidden").html(gphtml);
	
	var url="${basePath}/privilege-group/checked-privilege-tree-json?groupIds="+groupIds;
	$.ajax({
		url: url,
		type: "POST",
		dataType:'json',
		success: function (data) {
			$("#tree_table").treegrid('loadData',data);
		}
	});

	
	
}


function searchPerson(){
	var personName=$("#s_personName").val();
	var loginName=$("#s_loginName").val();
	
	var url="${basePath}/person/person-list-json";
	$.ajax({
		url: url,
		type: "POST",
		data:{'personName':personName,'loginName':loginName},
		dataType:'json',
		success: function (data) {
			$("#personSelect").combogrid("grid").datagrid('loadData',data);
		}
	});
}
function searchPrivilegeGroup(){
	var privilegeGroupName=$("#s_privilegeGroupName").val();
	
	var url="${basePath}/privilege-group/privilege-group-list-json";
	$.ajax({
		url: url,
		type: "POST",
		data:{'privilegeGroupName':privilegeGroupName},
		dataType:'json',
		success: function (data) {
			$("#privilegeGroupSelect").combogrid("grid").datagrid('loadData',data);
		}
	});
}


function checkAddAppend(obj){
	var $this=$(obj);
	if($("#radioAdd").prop("checked")){
		$("#addDiv").removeClass("hidden");
		$("#appendDiv").addClass("hidden");
		
		$('#personSelect').combo({required:false});  
		$("#data_form").find("[name='name']").validatebox('enableValidation');
		$("#data_form").find("[name='loginName']").validatebox('enableValidation');
		$("#data_form").find("[name='loginPassword']").validatebox('enableValidation');
		$("#data_form").find("[name='cfmLoginPassword']").validatebox('enableValidation');
		
		//$.parser.parse($("#data_form"));	
	}
	
	if($("#radioAppend").prop("checked")){
		$("#addDiv").addClass("hidden");
		$("#appendDiv").removeClass("hidden");	
		
		$('#personSelect').combo({required:true}); 
		$("#data_form").find("[name='name']").validatebox('disableValidation');
		$("#data_form").find("[name='loginName']").validatebox('disableValidation');
		$("#data_form").find("[name='loginPassword']").validatebox('disableValidation');
		$("#data_form").find("[name='cfmLoginPassword']").validatebox('disableValidation');
		
		//$.parser.parse($("#data_form"));	
	}
	resizeEasyuiDom();
	
}



//提交表单
function submitForm(){
	$("#data_form").form('submit', {
		url : '${basePath}/staff/staff-save',
		onSubmit: function (){
			var ht=$("#grouphidden [name='privilegeGroupIdArray']");
			if(ht.length==0){
				hiddenPageShade();//未成功，隐藏遮罩层
				Notify('请配置权限组!', 'top-right', '5000', 'danger', 'fa-bolt', true);
				return false;
				
			}
			
			showPageShade();//当提交时候，显示遮罩层
			if(!$(this).form('validate')){//页面验证
				hiddenPageShade();//未成功，隐藏遮罩层
				return false;
			}
			return true;
        },
		success : function(result) {
			hiddenPageShade();//成功后，隐藏遮罩层
			MainTab.closeTabAndRefresh("员工管理");
		}
	});
}



function removeOperate(obj){
	var $this=$(obj);
	$this.parent().parent().remove();
	
}
function addGroup(){
	var row = $('#privilegeGroupSelect').combogrid('grid').datagrid('getSelected');	
	if(null!=row){
		var html="<tr>"+
				"<td>"+row.name+"<input type=\"hidden\" name=\"privilegeGroupIdArray\" value=\""+row.privilegeGroupId+"\"  /></td>"+
				"<td><a class=\"btn btn-danger btn-xs icon-only white\" onclick=\"removeOperate(this)\" href=\"javascript:void(0);\"><i class=\"fa fa-times \"></i></a></td>"+
			"</tr>";
		var $ids=$("#app-tbody").find("[name='privilegeGroupIdArray']");
		var flag=true;
		for(var i=0;i<$ids.length;i++){
			if($($ids[i]).val()==row.privilegeGroupId){
					flag=false;
					break;
			}
		}	
		if(flag){
			$("#app-tbody").append(html);
		}else{
			Notify('权限组已经选中!', 'top-right', '5000', 'danger', 'fa-bolt', true);
		}
	}else{
		Notify('请选择权限组!', 'top-right', '5000', 'danger', 'fa-bolt', true);
	}
}

</script>


